<template>
  <div class="todoapp">
    <TodoHeader></TodoHeader>
    <TodoMain></TodoMain>
    <TodoFooter></TodoFooter>
  </div>
</template>

<script>
// 导入
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'

// 导入辅助函数
import { mapState } from 'vuex'

export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  data () {
    return {}
  },

  computed: {
    ...mapState(['list'])
    // ...mapGetters(['todoslist'])
  },
  watch: {
    list: {
      deep: true,
      handler () {
        // 当数组发生变化时，存入本地
        localStorage.setItem('todolist', JSON.stringify(this.list))
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
